<template>
	<NavBarVue title="商家首页" />
	<view class="myBox">
		<!-- 头部 -->
		<view class="myLog">
			<div class="head">
				<div class="head_left">
					<img src="/static/1004.webp" @click="toshoop" alt=""
						style="width: 85px;height: 80px;border-radius: 50%;" />
				</div>
				<div class="head_right">
					<view style="display: flex;">
						<p>蔚然青岛</p>
						<u-icon name="checkmark-circle" color="skyblue"></u-icon>
					</view>
					<p style="color: #ddd;margin-top: 5px;font-size: 13px;">汽车品牌 | <span>ID：NOI_qin</span></p>
					<p style="color: #ddd;margin-top: 5px;font-size: 13px;">IP属地 <span>：山东</span></p>
				</div>
			</div>
			<p style="color: #ccc;margin-left: 20px;font-size: 14x;">红瓦绿树、碧海蓝天</p>
			<p style="color: #ccc;margin-left: 20px;font-size: 14x;">和蔚然一起满电出发</p>
			<div class="head_bot">
				<ul class="bot_left">
					<li style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<p style="color: #fff;">3</p>
						<span style="color: #bbb;font-size: 12px;margin-top: 5px;">关注</span>
					</li>
					<li style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<p style="color: #fff;">1.5万</p>
						<span style="color: #bbb;font-size: 12px;margin-top: 5px;">粉丝</span>
					</li>
					<li style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<p style="color: #fff;">3681</p>
						<span style="color: #bbb;font-size: 12px;margin-top: 5px;">获赞和评论</span>
					</li>
				</ul>
				<div class="bot_right">
					<button
						style="width: 70px;height: 30px;border-radius: 15px;line-height: 30px;margin-right: 10px; background: linear-gradient( 270deg, #FB7685 0%, #FF4D65 100%);color: #fff;">关注</button>
					<button
						style="width: 70px;height: 30px;border-radius: 15px;margin-right: 10px; line-height: 30px;background:rgb(99, 139, 160);color: #fff;border: 1px solid #fff;">私信</button>
				</div>
			</div>
			<ul class="logul">
				<li class="logli" v-for="item in imgs" :key="item.id" @click="goDian">
					<img :src="item.img" style="width: 70px;height: 70px; border-radius: 35px;" alt="" />
					<p style="font-size: 14px;color: #eee;margin-top: 5px;">{{item.name}}</p>
				</li>
			</ul>
		</view>

		<!-- 主体部门 -->
		<view class="main">
			<u-sticky offset-top="0">
				<div class="main_tab">
					<u-tabs :list="list1" @click="click"></u-tabs>
				</div>
			</u-sticky>
			<div class="pubu">
				<view class="left">
					<view class="ul">
						<view class="li" v-for="item in leftlist" :key="item.id">

							<image src="/static/1002.png" class="ttt" @click="goDetails(item)"></image>
							<view class="nr">
								{{item.name}}
							</view>

							<view class="tx" style="display: flex; justify-content: space-between;">
								<view style="display: flex;">
									<image src="/static/1001.png"
										style="width:20px;height: 20px;border-radius: 10px;" />
									<view style="font-size: 12px;">{{item.ming}}</view>
								</view>
								<view style="display: flex;" @click="item.flag=!item.flag">
									<view v-if="item.flag"><u-icon name="heart-fill" size="21" color="red"></u-icon>
									</view>
									<view v-else><u-icon name="heart" size="21"></u-icon></view>

									<view style="font-size: 12px;">{{item.shu}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="ul">
						<view class="li" v-for="item in rightlist" :key="item.id">
							<image src="/static/1001.png" class="tt" @click="goDetails(item)"></image>
							<view class="nr">
								{{item.name}}
							</view>
							<view class="tx" style="display: flex;justify-content: space-between;">
								<view style="display: flex;">
									<image src="/static/1002.png"
										style="width:20px;height: 20px;border-radius: 10px;" />
									<view style="font-size: 12px;">{{item.ming}}</view>
								</view>
								<view style="display: flex;" @click="item.flag=!item.flag">
									<view v-if="item.flag"><u-icon name="heart-fill" size="21" color="red"></u-icon>
									</view>
									<view v-else><u-icon name="heart" size="21"></u-icon></view>

									<view style="font-size: 12px;">{{item.shu}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</div>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import NavBarVue from '../../../components/NavBar.vue';
	const list1 = [{
		name: '笔记',
	}, {
		name: '收藏',
	}, {
		name: '点赞'
	}]
	const click = (item) => {
		console.log('item', item);
	}
	const imgs = ref([{
			id: 1,
			name: '正弘城店',
			img: '/static/1010.jpg',
		},
		{
			id: 2,
			name: '中鼎大厦店',
			img: '/static/1011.jpg',
		},
		{
			id: 3,
			name: '圣熙店',
			img: '/static/1012.jpg',
		},
		{
			id: 4,
			name: '禹州店',
			img: '/static/1013.jpg',
		},
		{
			id: 5,
			name: '城南店',
			img: '/static/1014.jpg',
		},
	])
	const leftlist = reactive([{
			id: 0,
			name: "家人们，泰酷辣！和朋友们畅想唱歌的快乐",
			shu: 298,
			ming: "小浣熊",
			flag: false
		},
		{
			id: 1,
			name: "家人们，泰酷辣！和朋友们畅想唱歌的快乐",
			shu: 289,
			ming: "小浣熊",
			flag: false
		},
		{
			id: 2,
			name: "家人们，泰酷辣！和朋友们畅想唱歌的快乐",
			shu: 289,
			ming: "小浣熊",
			flag: false
		},
		{
			id: 3,
			name: "家人们，泰酷辣！和朋友们畅想唱歌的快乐",
			shu: 289,
			ming: "小浣熊",
			flag: false
		},
		{
			id: 4,
			name: "家人们，泰酷辣！和朋友们畅想唱歌的快乐",
			shu: 289,
			ming: "小浣熊",
			flag: false
		},
		{
			id: 5,
			name: "家人们，泰酷辣！和朋友们畅想唱歌的快乐",
			shu: 289,
			ming: "小浣熊",
			flag: false
		},
		{
			id: 6,
			name: "家人们，泰酷辣！和朋友们畅想唱歌的快乐",
			shu: 289,
			ming: "小浣熊",
			flag: false
		},

	])
	//右数据
	const rightlist = reactive([{
			id: 0,
			name: "夏季出行，清凉攻略,走进最舒适的环境",
			shu: 297,
			ming: "小熊熊",
			flag: false
		},
		{
			id: 1,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 279,
			ming: "小熊猫",
			flag: false
		},
		{
			id: 2,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 279,
			ming: "小熊猫",
			flag: false
		},
		{
			id: 3,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 279,
			ming: "小熊猫",
			flag: false
		},
		{
			id: 4,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 279,
			ming: "小熊猫",
			flag: false
		},
		{
			id: 5,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 279,
			ming: "小熊猫",
			flag: false
		},
		{
			id: 6,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 279,
			ming: "小熊猫",
			flag: false
		},
		{
			id: 7,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 279,
			ming: "小熊猫",
			flag: false
		},

	])
	const rightClick = () => {
		console.log('rightClick');
	}

	// 跳转商家主页
	//跳转进店逛逛
	const goDian=()=>{
		uni.navigateTo({
			url:'/pages/shopTour/shopTour'
		})
	}

</script>

<style scoped>
	.myBox {
		width: 100vw;
		height: 100vh;
	}

	.myLog {
		width: 100%;
		height: 340px;
		padding: 30px 0px;
		background: rgb(99, 139, 160);
	}

	.head {
		width: 100%;
		height: 100px;
		/* background: salmon; */
		display: flex;
		/* margin-top: 20px; */
	}

	.head_left {
		width: 100px;
		height: 100%;
		/* background: salmon; */
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.head_right {
		flex: 1;
		margin-top: 17px;
		margin-left: 15px;
		color: #fff;
	}

	.head_bot {
		width: 100%;
		height: 80px;
		/* background: salmon; */
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bot_left {
		width: 200px;
		height: 100%;
		display: flex;
		/* background: salmon; */
		justify-content: space-evenly;
	}

	.bot_right {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.main {
		width: 100%;
		/* height: 500px; */
		/* background: sandybrown; */
		margin-top: -30px;
	}

	.main_tab {
		width: 100%;
		height: 50px;
		background: #fff;
		border-radius: 12px 12px 0px 0px;
		display: flex;
		justify-content: center;
	}

	.main_li {
		width: 100%;
		/* height: 200px; */
		/* background: seashell; */
		text-align: center;
	}

	.logul {
		width: 100%;
		height: 90px;
		/* background: salmon; */
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.logli {
		width: 70px;
		height: 100%;
		/* background: sandybrown; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.pubu {
		width: 100%;
		/* height: 300px; */
		height: auto;
		display: flex;
		justify-content: space-evenly;
	}

	.left {
		width: 46vw;
		height: auto;
		margin-right: 2vw;
	}

	.left .ul {
		width: 100%;
		height: auto;
	}

	.left .ul .li {
		font-size: 14px;
		width: 100%;
		height: auto;
		overflow: hidden;

	}

	.right {
		width: 46vw;
		height: auto;
	}

	.right.ul {
		width: 100%;
		height: auto;
	}

	.right .ul .li {
		font-size: 14px;
		width: 100%;
		height: auto;
	}

	.tx {
		width: 100%;
		height: 40px;
		box-sizing: border-box;
		padding: 0px 10px;
		margin-top: 10px;
	}

	.nr {
		box-sizing: border-box;
		padding: 0px 10px;
	}

	.ttt {
		width: 100%;
		height: 220px;
	}

	.tt {
		width: 100%;
		height: 200px;
	}
</style>